<template>
  <div class="admin-accounts-page">
    <!-- 权限检查 -->
    <div v-if="!hasPermission" class="no-permission">
      <el-card>
        <div class="permission-warning">
          <i class="el-icon-warning-outline"></i>
          <h2>无权限访问</h2>
          <p>您当前的账户等级不足，仅等级为1的超级管理员可以访问此页面。</p>
          <el-button type="primary" @click="goBack">返回</el-button>
        </div>
      </el-card>
    </div>
    
    <!-- 管理员列表 -->
    <div v-else>
      <div class="page-header">
        <div class="page-title">管理员账户</div>
        <div class="page-actions">
          <el-button type="primary" icon="el-icon-plus" @click="showAddAdminDialog">添加管理员</el-button>
          <el-button icon="el-icon-refresh" @click="fetchAdmins">刷新</el-button>
        </div>
      </div>
      
      <div class="filter-bar">
        <div class="filter-left">
          <div class="filter-item">
            <el-input
              placeholder="搜索管理员姓名"
              prefix-icon="el-icon-search"
              v-model="searchQuery"
              clearable
            ></el-input>
          </div>
        </div>
        <div class="filter-right">
          <el-button @click="resetFilters">重置</el-button>
          <el-button type="primary" @click="searchAdmins">查询</el-button>
        </div>
      </div>
      
      <div class="admin-table-container">
        <el-table
          :data="filteredAdmins"
          style="width: 100%"
          v-loading="loading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="admin_id" label="ID" width="80"></el-table-column>
          <el-table-column label="头像" width="100">
            <template #default="{ row }">
              <el-avatar :src="row.avatar || defaultAvatar" :size="40"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="admin_name" label="姓名" min-width="120"></el-table-column>
          <el-table-column prop="admin_level" label="等级" width="120">
            <template #default="{ row }">
              <el-tag :type="row.admin_level === 1 ? 'danger' : 'success'">
                {{ row.admin_level === 1 ? '超级管理员' : '普通管理员' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="create_at" label="创建时间" min-width="180"></el-table-column>
          <el-table-column prop="last_login" label="最后登录" min-width="180">
            <template #default="{ row }">
              {{ row.last_login || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template #default="{ row }">
              <el-switch
                v-model="row.is_active"
                :active-value="true"
                :inactive-value="false"
                @change="val => handleStatusChange({admin_id: row.admin_id, admin_name: row.admin_name, is_active: val})"
                :disabled="row.admin_level === 1 && row.admin_id === currentAdminId"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button 
                  type="primary" 
                  size="mini" 
                  @click="editAdmin(row)"
                  :disabled="row.admin_level === 1 && row.admin_id !== currentAdminId"
                >
                  编辑
                </el-button>
                <el-button 
                  type="success"
                  plain
                  size="mini"
                  @click="viewAdminDetails(row)"
                >
                  详情
                </el-button>
                <el-button 
                  type="danger" 
                  size="mini" 
                  @click="deleteAdmin(row)"
                  :disabled="row.admin_level === 1 && row.admin_id === currentAdminId"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="pagination" v-if="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </div>
    </div>
    
    <!-- 添加/编辑管理员对话框 -->
    <el-dialog 
      :title="isEdit ? '编辑管理员' : '添加管理员'" 
      v-model="adminDialogVisible" 
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="adminForm" :rules="adminRules" ref="adminFormRef" label-width="120px">
        <el-form-item label="管理员名称" prop="admin_name">
          <el-input v-model="adminForm.admin_name" placeholder="请输入管理员姓名" :disabled="isEdit"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!isEdit">
          <el-input 
            v-model="adminForm.password" 
            type="password" 
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员级别" prop="admin_level">
          <el-select v-model="adminForm.admin_level" placeholder="请选择管理员级别" style="width: 100%">
            <el-option :label="'普通管理员'" :value="2"></el-option>
            <el-option :label="'超级管理员'" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isEdit" label="验证密码" prop="current_admin_password">
          <el-input 
            v-model="adminForm.current_admin_password" 
            type="password" 
            placeholder="请输入当前管理员密码"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="adminDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAdminForm" :loading="submitLoading">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'AdminAccountsPage',
  data() {
    return {
      // 权限控制
      hasPermission: false,
      currentAdminId: null,
      currentAdminLevel: null,
      
      // 管理员列表
      admins: [],
      loading: false,
      searchQuery: '',
      selectedAdmins: [],
      
      // 分页
      currentPage: 1,
      pageSize: 10,
      pagination: null,
      
      // 对话框
      adminDialogVisible: false,
      isEdit: false,
      submitLoading: false,
      adminForm: {
        admin_id: null,
        admin_name: '',
        admin_level: 2,
        password: '', // 只在新增时使用
        current_admin_password: '' // 编辑时使用，当前管理员的密码
      },
      
      // 表单验证规则
      adminRules: {
        admin_name: [
          { required: true, message: '请输入管理员姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        admin_level: [
          { required: true, message: '请选择管理员等级', trigger: 'change' }
        ],
        current_admin_password: [
          { required: true, message: '请输入当前管理员密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      },
      
      // 默认头像
      defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  
  computed: {
    filteredAdmins() {
      if (!this.searchQuery) {
        return this.admins
      }
      
      const query = this.searchQuery.toLowerCase()
      return this.admins.filter(admin => 
        (admin.admin_name && admin.admin_name.toLowerCase().includes(query))
      )
    }
  },
  
  created() {
    this.checkPermission()
  },
  
  mounted() {
    console.log('AdminAccounts组件已挂载')
    setTimeout(() => {
      console.log('admins数组:', this.admins)
      console.log('filteredAdmins计算属性:', this.filteredAdmins)
    }, 2000)
  },
  
  methods: {
    // 检查权限
    checkPermission() {
      const adminInfoStr = localStorage.getItem('adminInfo')
      console.log('localStorage中的adminInfo:', adminInfoStr)
      
      const adminInfo = JSON.parse(localStorage.getItem('adminInfo') || '{}')
      console.log('解析后的adminInfo:', adminInfo)
      
      this.currentAdminId = adminInfo.admin_id
      this.currentAdminLevel = adminInfo.admin_level || 2
      
      console.log('当前管理员ID:', this.currentAdminId, '当前管理员等级:', this.currentAdminLevel)
      
      // 只有等级为1的管理员才能访问
      this.hasPermission = this.currentAdminLevel === 1
      console.log('是否有权限访问:', this.hasPermission)
      
      if (this.hasPermission) {
        this.fetchAdmins()
      } else {
        console.warn('无权限访问管理员账户页面')
      }
    },
    
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    
    // 获取管理员列表
    fetchAdmins() {
      this.loading = true
      console.log('开始获取管理员列表，当前页码:', this.currentPage, '每页数量:', this.pageSize)
      
      // 使用真实API获取管理员列表，移除Authorization头
      axios.get(`https://smartsound.top/api/v1/admin/list?page_size=${this.pageSize}&page=${this.currentPage}`)
        .then(response => {
          console.log('API响应成功:', response.data)
          if (response.data && response.data.code === 0) {
            console.log('API返回数据:', response.data.data)
            
            // 检查返回的数据结构
            if (response.data.data.admins) {
              console.log('找到admins字段:', response.data.data.admins)
              this.admins = response.data.data.admins
            } else if (response.data.data.list) {
              console.log('找到list字段:', response.data.data.list)
              this.admins = response.data.data.list
            } else {
              console.error('未找到管理员列表数据，使用空数组')
              this.admins = []
            }
            
            console.log('设置admins数组:', this.admins)
            this.pagination = {
              total: response.data.data.total || this.admins.length,
              page: response.data.data.page || this.currentPage,
              size: response.data.data.size || this.pageSize,
              total_pages: response.data.data.total_pages || Math.ceil((response.data.data.total || this.admins.length) / this.pageSize)
            }
            console.log('设置分页信息:', this.pagination)
          } else {
            console.error('API响应错误:', response.data.message || '未知错误')
            this.$message.error(response.data.message || '获取管理员列表失败')
            // 失败时使用模拟数据作为后备
            this.admins = this.generateMockAdmins()
            this.pagination = {
              total: this.admins.length,
              page: this.currentPage,
              size: this.pageSize,
              total_pages: Math.ceil(this.admins.length / this.pageSize)
            }
          }
          this.loading = false
        })
        .catch(error => {
          console.error('获取管理员列表请求失败:', error)
          console.error('错误详情:', error.response ? error.response.data : '无响应数据')
          this.$message.error('获取管理员列表失败，请检查网络连接')
          
          // 失败时使用模拟数据作为后备
          this.admins = this.generateMockAdmins()
          this.pagination = {
            total: this.admins.length,
            page: this.currentPage,
            size: this.pageSize,
            total_pages: Math.ceil(this.admins.length / this.pageSize)
          }
          this.loading = false
        })
    },
    
    // 生成模拟数据
    generateMockAdmins() {
      const mockAdmins = []
      
      // 添加当前管理员
      mockAdmins.push({
        admin_id: 1,
        admin_name: '系统管理员',
        admin_level: 1,
        create_at: '2023-01-01 00:00:00',
        last_login: new Date().toLocaleString(),
        is_active: true,
        avatar: 'https://picsum.photos/id/1005/200/200'
      })
      
      // 添加其他管理员
      for (let i = 2; i <= 15; i++) {
        const level = i <= 3 ? 1 : 2;
        
        mockAdmins.push({
          admin_id: i,
          admin_name: `管理员${i}`,
          admin_level: level,
          create_at: `2023-0${Math.floor(Math.random() * 6) + 1}-${Math.floor(Math.random() * 28) + 1} 00:00:00`,
          last_login: `2023-12-${Math.floor(Math.random() * 30) + 1} ${Math.floor(Math.random() * 24)}:00:00`,
          is_active: Math.random() > 0.2,
          avatar: i % 3 === 0 ? `https://picsum.photos/id/${1000 + i}/200/200` : null
        })
      }
      
      return mockAdmins
    },
    
    // 搜索管理员
    searchAdmins() {
      this.currentPage = 1
      this.fetchAdmins()
    },
    
    // 重置筛选
    resetFilters() {
      this.searchQuery = ''
      this.fetchAdmins()
    },
    
    // 处理选择变化
    handleSelectionChange(selection) {
      this.selectedAdmins = selection
    },
    
    // 分页处理
    handleSizeChange(size) {
      this.pageSize = size
      this.fetchAdmins()
    },
    
    handleCurrentChange(page) {
      this.currentPage = page
      this.fetchAdmins()
    },
    
    // 状态变更 - 只处理表格中的状态变更
    handleStatusChange(admin) {
      console.log('状态变更请求:', admin);
      
      // 提示用户输入密码以确认操作
      this.$prompt('请输入您的密码以确认状态更改', '安全验证', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'password',
        inputPlaceholder: '请输入您的管理员密码',
        inputPattern: /.+/,
        inputErrorMessage: '密码不能为空'
      }).then(({ value }) => {
        // 显示加载状态
        this.loading = true;
        
        // 构建请求数据
        const requestData = {
          target_admin_id: admin.admin_id,
          is_active: admin.is_active,
          current_admin_password: value
        };
        
        console.log('发送状态变更API请求:', requestData);
        
        // 调用API更新状态
        axios.post('https://smartsound.top/api/v1/admin/toggle_active', requestData)
          .then(response => {
            if (response.data && response.data.code === 0) {
              this.$message.success(`管理员"${admin.admin_name}"状态已${admin.is_active ? '启用' : '禁用'}`);
              // 更新成功，刷新列表
              this.fetchAdmins();
            } else {
              this.$message.error(response.data.message || '更新状态失败');
              // 恢复表格中的状态
              const adminInList = this.admins.find(item => item.admin_id === admin.admin_id);
              if (adminInList) {
                adminInList.is_active = !admin.is_active;
              }
            }
          })
          .catch(error => {
            console.error('更新状态失败:', error);
            console.error('错误详情:', error.response ? error.response.data : error.message);
            this.$message.error('更新状态失败，请检查网络连接或密码是否正确');
            // 恢复表格中的状态
            const adminInList = this.admins.find(item => item.admin_id === admin.admin_id);
            if (adminInList) {
              adminInList.is_active = !admin.is_active;
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }).catch(() => {
        // 用户取消操作，恢复原状态
        this.$message.info('已取消状态更改操作');
        // 恢复表格中的状态
        const adminInList = this.admins.find(item => item.admin_id === admin.admin_id);
        if (adminInList) {
          adminInList.is_active = !admin.is_active;
        }
      });
    },
    
    // 显示添加管理员对话框
    showAddAdminDialog() {
      this.isEdit = false
      this.adminForm = {
        admin_id: null,
        admin_name: '',
        admin_level: 2,
        password: '',
        current_admin_password: ''
      }
      this.adminDialogVisible = true
      
      // 重置表单验证
      if (this.$refs.adminFormRef) {
        this.$refs.adminFormRef.resetFields()
      }
    },
    
    // 编辑管理员
    editAdmin(admin) {
      this.isEdit = true;
      this.adminForm = {
        admin_id: admin.admin_id,
        admin_name: admin.admin_name,
        admin_level: admin.admin_level,
        current_admin_password: ''
      };
      this.adminDialogVisible = true;
      
      // 重置表单验证
      if (this.$refs.adminFormRef) {
        this.$refs.adminFormRef.resetFields()
      }
    },
    
    // 删除管理员
    deleteAdmin(admin) {
      this.$confirm(`确定要删除管理员 "${admin.admin_name}" 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 获取当前管理员信息
        const adminInfo = JSON.parse(localStorage.getItem('adminInfo') || '{}');
        
        // 使用DELETE请求删除管理员，不在URL中包含ID
        axios.delete(`https://smartsound.top/api/v1/admin/delete`, {
          data: {
            target_admin_name: admin.admin_name,
            current_admin_name: adminInfo.admin_name,
            current_admin_password: adminInfo.admin_password || ''
          }
        })
          .then(response => {
            if (response.data && response.data.code === 0) {
              this.$message.success('删除成功')
              this.fetchAdmins()
            } else {
              this.$message.error(response.data.message || '删除失败')
            }
          })
          .catch(error => {
            console.error('删除管理员失败:', error)
            this.$message.error('删除失败，请检查网络连接')
          })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    
    // 提交表单
    submitAdminForm() {
      this.$refs.adminFormRef.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          
          if (this.isEdit) {
            // 编辑管理员
            // 构建请求数据
            const data = {
              target_admin_id: this.adminForm.admin_id,
              new_level: this.adminForm.admin_level,
              current_admin_password: this.adminForm.current_admin_password
            };
            
            console.log('提交管理员更新请求:', data);
            
            // 发送请求修改管理员信息
            axios.post('https://smartsound.top/api/v1/admin/update', data)
              .then(response => {
                if (response.data && response.data.code === 0) {
                  this.$message.success(`管理员 ${this.adminForm.admin_name} 等级已更新`);
                  this.adminDialogVisible = false;
                  this.fetchAdmins(); // 刷新列表
                } else {
                  this.$message.error(response.data.message || '更新管理员等级失败');
                }
              })
              .catch(error => {
                console.error('更新管理员等级失败:', error);
                console.error('错误详情:', error.response ? error.response.data : error.message);
                this.$message.error('更新管理员等级失败，请检查网络连接或密码是否正确');
              })
              .finally(() => {
                this.submitLoading = false;
              });
          } else {
            // 添加管理员逻辑
            const url = 'https://smartsound.top/api/v1/admin/add';
            
            // 构建请求数据
            const data = { 
              admin_name: this.adminForm.admin_name,
              admin_level: this.adminForm.admin_level,
              password: this.adminForm.password
            };
            
            console.log('添加新管理员请求:', data);
            
            axios.post(url, data)
              .then(response => {
                if (response.data && response.data.code === 0) {
                  this.$message.success('管理员添加成功');
                  this.adminDialogVisible = false;
                  this.fetchAdmins();
                } else {
                  this.$message.error(response.data.message || '添加失败');
                }
                this.submitLoading = false;
              })
              .catch(error => {
                console.error('添加管理员失败:', error);
                console.error('错误详情:', error.response ? error.response.data : error.message);
                this.$message.error('添加管理员失败，请检查网络连接');
                this.submitLoading = false;
              });
          }
        }
      });
    },
    
    // 查看管理员详情
    viewAdminDetails(admin) {
      // 创建一个包含更多信息的对象来展示
      const adminDetails = {
        admin_id: admin.admin_id,
        admin_name: admin.admin_name,
        admin_level: admin.admin_level === 1 ? '超级管理员' : '普通管理员',
        create_at: admin.create_at,
        last_login: admin.last_login || '暂无登录记录',
        is_active: admin.is_active ? '已启用' : '已禁用',
        avatar: admin.avatar || this.defaultAvatar
      };
      
      // 使用Element-Plus的消息盒子展示详情
      this.$msgbox({
        title: '管理员详情',
        message: this.createAdminDetailsHTML(adminDetails),
        dangerouslyUseHTMLString: true,
        confirmButtonText: '关闭',
        callback: action => {
          console.log('管理员详情对话框已关闭');
        }
      });
    },
    
    // 创建HTML格式的管理员详情
    createAdminDetailsHTML(admin) {
      return `
        <div style="display: flex; align-items: start; padding: 10px;">
          <div style="margin-right: 20px;">
            <img src="${admin.avatar}" alt="头像" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover;">
          </div>
          <div style="flex: 1;">
            <div style="margin-bottom: 15px;">
              <h3 style="margin: 0 0 10px 0;">${admin.admin_name}</h3>
              <div style="display: inline-block; padding: 2px 8px; background-color: ${admin.admin_level === '超级管理员' ? '#f56c6c' : '#67c23a'}; color: white; border-radius: 4px; font-size: 12px;">
                ${admin.admin_level}
              </div>
              <div style="display: inline-block; margin-left: 10px; padding: 2px 8px; background-color: ${admin.is_active === '已启用' ? '#67c23a' : '#909399'}; color: white; border-radius: 4px; font-size: 12px;">
                ${admin.is_active}
              </div>
            </div>
            <div style="font-size: 14px; color: #606266; margin-bottom: 5px;">ID: ${admin.admin_id}</div>
            <div style="font-size: 14px; color: #606266; margin-bottom: 5px;">创建时间: ${admin.create_at}</div>
            <div style="font-size: 14px; color: #606266; margin-bottom: 5px;">最后登录: ${admin.last_login}</div>
          </div>
        </div>
      `;
    },
    
    // 修改管理员权限
    changeAdminAuthority() {
      // 获取当前管理员密码
      this.$prompt('请输入您的密码以确认更改管理员权限', '安全验证', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputType: 'password',
        inputPattern: /.+/,
        inputErrorMessage: '密码不能为空'
      }).then(({ value }) => {
        // 构建请求数据
        const data = {
          target_admin_id: this.adminForm.admin_id,
          new_level: this.adminForm.admin_level,
          current_admin_password: value
        };
        
        console.log('提交权限更改请求:', data);
        
        // 发送请求修改权限
        axios.post('https://smartsound.top/api/v1/admin/changeauthority', data)
          .then(response => {
            if (response.data && response.data.code === 0) {
              this.$message.success(`管理员 ${this.adminForm.admin_name} 的权限已更新为 ${this.adminForm.admin_level === 1 ? '超级管理员' : '普通管理员'}`);
              this.adminDialogVisible = false;
              this.fetchAdmins();
            } else {
              this.$message.error(response.data.message || '更新权限失败');
            }
            this.submitLoading = false;
          })
          .catch(error => {
            console.error('更新管理员权限失败:', error);
            console.error('错误详情:', error.response ? error.response.data : error.message);
            this.$message.error('更新管理员权限失败，请检查网络连接或密码是否正确');
            this.submitLoading = false;
          });
      }).catch(() => {
        this.$message.info('已取消权限更改');
        this.submitLoading = false;
      });
    }
  }
}
</script>

<style scoped>
.admin-accounts-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 无权限提示 */
.no-permission {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.permission-warning {
  text-align: center;
  padding: 40px;
}

.permission-warning i {
  font-size: 64px;
  color: #f56c6c;
  margin-bottom: 20px;
}

.permission-warning h2 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 16px;
}

.permission-warning p {
  font-size: 16px;
  color: #606266;
  margin-bottom: 24px;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
}

.page-actions {
  display: flex;
}

.page-actions button {
  margin-left: 10px;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 4px;
  padding: 15px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filter-left {
  display: flex;
  align-items: center;
}

.filter-item {
  margin-right: 15px;
}

.filter-right {
  display: flex;
}

.filter-right button {
  margin-left: 10px;
}

/* 表格容器 */
.admin-table-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.el-table {
  flex: 1 1 0;
  min-height: 0;
  width: 100% !important;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 对话框 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .page-actions {
    margin-top: 10px;
  }
  
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-right {
    margin-top: 10px;
    justify-content: flex-end;
  }
}
</style> 